<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>誉禾植物店</title>
  <!-- bootstrap样式 -->
  <link href="https://cdn.staticfile.net/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
  <!-- element-ui的样式 -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <link rel="stylesheet" href="../css/home.css">

  <!-- vue2框架的js和emenet-ui的js -->
  <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <!-- 可以发送jquery请求 -->
  <script src="../js/jquery.min.js"></script>
  <!-- bootstrap框架 -->
  <script src="https://cdn.staticfile.net/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
  <!-- 用于发送请求 -->
  <script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <!-- js动画 -->
  <script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script>
</head>
<!-- 首页 -->
<body>
  <div id="home">
    <!-- 网页头部 -->
    <header>
      <iframe src="./header.html" height="110px" width="100%" frameborder="0"></iframe>
    </header>
    <!-- 轮播图 -->
    <section style="overflow: hidden;">
      <iframe src="./home_lunbo.html" width="100%" height="800px" frameborder="0"></iframe>
    </section>
    <!-- 关于我们 -->
    <section class="home_one_s" style="margin: 0 0 2%;">
      <div class="container">
        <div class="row">
          <div class="col-md-6">
            <div class="home_one_div1">
              <img src="../img/object-11.jpg" alt="">
            </div>
            <div class="home_one_div2" style="margin-top: 5%;">
              <div style="display: flex;">
                <div style="width: 30%;text-align: right;padding-right: 5%;">
                  <img src="../img/icon-04.png" alt="">
                </div>
                <div style="width: 70%;">
                  <h5>天然培植方法</h5>
                  <p style="font-size: 14px;color: #5a5a5a;">我们拥有大型的培植基地，植物均采用天然培育方法</p>
                </div>
              </div>
              <div style="display: flex;margin-top: 10%;">
                <div style="width: 30%; text-align: right;padding-right: 5%;">
                  <img src="../img/icon-05.png" alt="">
                </div>
                <div style="width: 70%;">
                  <h5>专属配送服务</h5>
                  <p style="font-size: 14px;color: #5a5a5a;">订单信息确认无误后，通常在1-2个工作日内将植物发出</p>
                </div>
              </div>
              <div style="display: flex;margin-top: 10%;">
                <div style="width: 30%; text-align: right;padding-right: 5%;">
                  <img src="../img/icon-06.png" alt="">
                </div>
                <div style="width: 70%;">
                  <h5>售后服务保障</h5>
                  <p style="font-size: 14px;color: #5a5a5a;">如果在运输过程中造成植物的损坏，我们会直接给您良好的保障</p>
                </div>
              </div>
            </div>
          </div>
          <div class="col-md-6">
            <div class="home_one_div3">
              <h2 style="margin-bottom: 10%;">关于我们</h2>
              <p style="font-size: 14px; line-height: 40px; color: rgb(102, 102, 102);">多肉植物 （succulent
                plant）是指植物营养器官的某一部分 ，如茎或叶或根（少数种类兼有两个或两个以上部分）
                具有发达的薄壁组织用以贮藏水分，在外形上显得肥厚多汁的一类的观赏性植物...</p>
              <p style="font-size: 14px; line-height: 40px; "><a style="color: rgb(102, 102, 102);"
                  href="./about.html">查看更多+</a></p>
            </div>
            <div class="home_one_div4">
              <img src="../img/object-12.jpg" alt="">
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- 数据 -->
    <section class="home_two"
      style="position: relative;background: url('../img/bg-07.jpg') no-repeat;padding: 5% 0 10% 0;">
      <div class="container" style="z-index: 999;">
        <div class="row">
          <div class="col-md-3 home_two_1" style="border-right: 1px dashed rgb(217, 217, 217);">
            <p class="div_p">27<span style="font-size: 10px;">年</span></p>
            <p class="div_p_p">工作经验</p>
          </div>
          <div class="col-md-3 home_two_2" style="border-right: 1px dashed rgb(217, 217, 217);">
            <p class="div_p">169<span style="font-size: 10px;">个</span></p>
            <p class="div_p_p">到达城市</p>
          </div>
          <div class="col-md-3 home_two_3" style="border-right: 1px dashed rgb(217, 217, 217);">
            <p class="div_p">32<span style="font-size: 10px;">位</span></p>
            <p class="div_p_p">手工花艺师</p>
          </div>
          <div class="col-md-3 home_two_4">
            <p class="div_p">6900<span style="font-size: 10px;">+</span></p>
            <p class="div_p_p">培育的盆栽植物</p>
          </div>
        </div>
      </div>
    </section>
    <!-- 产品 -->
    <section class="home_three">
      <div class="container">
        <div style="text-align: center;">
          <div>
            <img src="../img/object-09.png" alt="" class="home_three_1">
            <div class="home_three_2" style="display: flex; margin-top: 2%;margin-bottom: 3%;">
              <div style="margin: auto;">
                <img src="../img/line.jpg" height="6px" width="329px" alt="">
              </div>
              <div style="margin: auto;">
                <h2 style="font-weight: 600;margin: auto;">PRODUCTS</h2>
              </div>
              <div style="margin: auto;">
                <img src="../img/line.jpg" height="6px" width="329px" alt="">
              </div>
            </div>
            <div class="home_three_3" style="margin-top: 1%;margin-bottom: 2%;">
              <h5 style="color: rgb(142, 179, 89);font-weight: 600;">- 产品 -</h5>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-md-4" style="margin-top: 3%; overflow: hidden;">
            <div style="overflow: hidden;">
              <img class="home_five" src="../img/product-08.jpg" width="100%" alt="">
            </div>
            <h6 style="text-align: center;margin-top: 2%;">99爱恋</h6>
          </div>
          <div class="col-md-4" style="margin-top: 3%; overflow: hidden;">
            <div style="overflow: hidden;">
              <img class="home_five" src="../img/product-07.jpg" width="100%" alt="">
            </div>
            <h6 style="text-align: center;margin-top: 2%;">祝愿您幸福</h6>
          </div>
          <div class="col-md-4" style="margin-top: 3%; overflow: hidden;">
            <div style="overflow: hidden;">
              <img class="home_five" src="../img/product-09.jpg" width="100%" alt="">
            </div>
            <h6 style="text-align: center;margin-top: 2%;">潘朵拉</h6>
          </div>
          <div class="col-md-4" style="margin-top: 3%; overflow: hidden;">
            <div style="overflow: hidden;">
              <img class="home_five" src="../img/product-10.jpg" width="100%" alt="">
            </div>
            <h6 style="text-align: center;margin-top: 2%;">真情祝福</h6>
          </div>
          <div class="col-md-4" style="margin-top: 3%; overflow: hidden;">
            <div style="overflow: hidden;">
              <img class="home_five" src="../img/product-11.jpg" width="100%" alt="">
            </div>
            <h6 style="text-align: center;margin-top: 2%;">感恩的心</h6>
          </div>
          <div class="col-md-4" style="margin-top: 3%; overflow: hidden;">
            <div style="overflow: hidden;">
              <img class="home_five" src="../img/product-12.jpg" width="100%" alt="">
            </div>
            <h6 style="text-align: center;margin-top: 2%;">恰似你的温柔</h6>
          </div>
        </div>
      </div>
    </section>
    <!-- 绿植中心 -->
    <section class="home_four" style="margin: 3% 0;background: url(../img/bg-09.jpg);padding: 5% 0;">
      <div class="container">
        <div class="home_four_1" style="text-align: center;margin-left: 50%;">
          <h6 style="color: #8eb359;">Plants store</h6>
          <h2 style="margin: 3% 0; font-weight: 700;">我们只培育适合室内养殖的多肉植物</h2>
          <p style="font-size: 12px;color: #5a5a5a;">We only cultivate succulent plants that are suitable for indoor
            farming</p>
          <div
            style="background-color: #8eb359;height: 80px;width: 80px;margin: auto;border-radius: 50%;padding-top: 4%;box-shadow: 5px 0px 15px rgba(142, 179, 89,.8);">
            <a style="color: #fff;font-size: 12px;" href="./green_planting.html">绿植中心</a>
          </div>
        </div>
      </div>
    </section>
    <!-- 新闻中心 -->
    <section class="home_sex" style="margin-bottom: 3%;">
      <div class="container">
        <div style="text-align: center;">
          <div>
            <img class="home_sex_1" src="../img/object-09.png" alt="">
            <div class="home_sex_2" style="display: flex; margin-top: 2%;margin-bottom: 3%;">
              <div style="margin: auto;">
                <img src="../img/line.jpg" height="6px" width="329px" alt="">
              </div>
              <div style="margin: auto;">
                <h2 style="font-weight: 600;margin: auto;">NEWS INFORMATION</h2>
              </div>
              <div style="margin: auto;">
                <img src="../img/line.jpg" height="6px" width="329px" alt="">
              </div>
            </div>
            <div class="home_sex_3" style="margin-top: 1%;margin-bottom: 2%;">
              <h5 style="color: rgb(142, 179, 89);font-weight: 600;">- 新闻资讯 -</h5>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-md-4">
            <div style="overflow: hidden;">
              <img class="home_img" src="../img/blog-03-370x230.jpg" alt="">
            </div>
            <div style="margin-top: 4%;">
              <h6 style="font-weight: 600;">非洲菊有了“本地户口”花店里的很多都来自文成</h6>
              <p style="color: #5a5a5a;font-size: 12px;">2024-07-30</p>
              <p style="color: #5a5a5a;font-size: 14px;"> 玲珑粉、黄金海岸、白马*子……这些不是地名、人名，而是文成黄坦鲜切花生产基地出产的非洲菊的花名。</p>
            </div>
          </div>
          <div class="col-md-4">
            <div style="overflow: hidden;">
              <img class="home_img" src="../img/blog-04-370x230.jpg" alt="">
            </div>
            <div style="margin-top: 4%;">
              <h6 style="font-weight: 600;">沭阳新河花农开设“网上花店”2000多家</h6>
              <p style="color: #5a5a5a;font-size: 12px;">2024-07-30</p>
              <p style="color: #5a5a5a;font-size: 14px;">“我们家的网上花卉店已经达到‘皇冠’级别了!”7月30日，笔者在沭阳县新河镇新槐村走访时，花农张超高兴的说道。</p>
            </div>
          </div>
          <div class="col-md-4">
            <div style="overflow: hidden;">
              <img class="home_img" src="../img/blog-05-370x230.jpg" alt="">
            </div>
            <div style="margin-top: 4%;">
              <h6 style="font-weight: 600;">网上花店青睐情人节</h6>
              <p style="color: #5a5a5a;font-size: 12px;">2024-07-30</p>
              <p style="color: #5a5a5a;font-size: 14px;">2000年，李xx在网上开了一家名叫“花好月圆”的网上花店，玫瑰象征爱情，情人节是网上花店较红火的日子。</p>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- 网页尾部 -->
    <footer>
      <iframe src="./footer.html" width="100%" height="400px" frameborder="0"></iframe>
    </footer>
  </div>
</body>
<script>

  // 产品
  let btnList = document.querySelectorAll('.home_img');
  btnList.forEach(function (item) {
    //鼠标移入
    item.addEventListener('mouseover', function (event) {
      item.style.transform = 'scale(1.2)';
    })
    //鼠标移出
    item.addEventListener('mouseout', function (event) {
      item.style.transform = 'scale(1)';
    })
  })

  // 产品
  let btnThisList1 = document.querySelectorAll('.home_five');
  btnThisList1.forEach(function (item) {
    //鼠标移入
    item.addEventListener('mouseover', function (event) {
      item.style.transform = 'scale(1.2)';
    })
    //鼠标移出
    item.addEventListener('mouseout', function (event) {
      item.style.transform = 'scale(1)';
    })
  })

  const r1 = new IntersectionObserver(entries => {
    if (entries[0].intersectionRatio <= 0) return
    let t1 = gsap.timeline({ defaults: { repeatDelay: 0.25 } })
    t1.from('.home_one_div1', { duration: 1, opacity: 0 })
    t1.from('.home_one_div2', { y: 300, ease: "power1.out", duration: 1, opacity: 0 })
    t1.from('.home_one_div3', { y: 300, ease: "power1.out", duration: 1, opacity: 0 })
    t1.from('.home_one_div4', { y: 300, ease: "power1.out", duration: 1, opacity: 0 })
  })
  r1.observe(document.querySelector('.home_one_s'))

  const r2 = new IntersectionObserver(entries => {
    if (entries[0].intersectionRatio <= 0) return
    let t1 = gsap.timeline({ defaults: { repeatDelay: 0.25 } })
    t1.from('.home_two_1', { duration: 1, opacity: 0 })
    t1.from('.home_two_2', { y: 300, ease: "power1.out", duration: 1, opacity: 0 })
    t1.from('.home_two_3', { y: 300, ease: "power1.out", duration: 1, opacity: 0 })
    t1.from('.home_two_4', { y: 300, ease: "power1.out", duration: 1, opacity: 0 })
  })
  r2.observe(document.querySelector('.home_two'))

  const r3 = new IntersectionObserver(entries => {
    if (entries[0].intersectionRatio <= 0) return
    let t1 = gsap.timeline({ defaults: { repeatDelay: 0.25 } })
    t1.from('.home_three_1', { y: 300, ease: "power1.out", duration: 1, opacity: 0 })
    t1.from('.home_three_2', { y: 300, ease: "power1.out", duration: 1, opacity: 0 })
    t1.from('.home_three_3', { y: 300, ease: "power1.out", duration: 1, opacity: 0 })
  })
  r3.observe(document.querySelector('.home_three'))

  const r4 = new IntersectionObserver(entries => {
    if (entries[0].intersectionRatio <= 0) return
    let t1 = gsap.timeline({ defaults: { repeatDelay: 0.25 } })
    t1.from('.home_four_1', { y: 300, ease: "power1.out", duration: 1, opacity: 0 })
  })
  r4.observe(document.querySelector('.home_four'))

  const r5 = new IntersectionObserver(entries => {
    if (entries[0].intersectionRatio <= 0) return
    let t1 = gsap.timeline({ defaults: { repeatDelay: 0.25 } })
    t1.from('.home_sex_1', { y: 300, ease: "power1.out", duration: 1, opacity: 0 })
    t1.from('.home_sex_2', { y: 300, ease: "power1.out", duration: 1, opacity: 0 })
    t1.from('.home_sex_3', { y: 300, ease: "power1.out", duration: 1, opacity: 0 })
  })
  r5.observe(document.querySelector('.home_sex'))
</script>

</html>